<template>
  <div>
    <ZgDialog
      width="60%"
      top="10%"
      title="新增字段"
      v-model="visible"
      @ok="save">
      <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
        <a-form-item label="公式名称" required>
          <ZgInput v-model="name"></ZgInput>
        </a-form-item>
        <a-form-item label="执行方式" required>
          <ZgDictionary v-model="cata" code="executeType"></ZgDictionary>
        </a-form-item>
        <a-form-item label="触发机制" required>
          <ZgDictionary v-model="triggerMode" code="formulaTriggerMode"></ZgDictionary>
        </a-form-item>
        <a-form-item label="公式内容" required>
          <ZgCodeMirror ref="codeMirror"></ZgCodeMirror>
        </a-form-item>
      </a-form>
    </ZgDialog>
  </div>
</template>
<script>
export default {
  props: {
    formId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      name: '',
      cata: '',
      triggerMode: ''
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    save () {
      if (this.name.length === 0) {
        this.$error({ title: '请输入公式名称' })
        return
      }
      if (this.cata.length === 0) {
        this.$error({ title: '请选择公式执行方式' })
        return
      }
      if (this.triggerMode.length === 0) {
        this.$error({ title: '请设置公式触发机制' })
        return
      }
      const content = this.$refs.codeMirror.getVal()
      if (content.length === 0) {
        this.$error({ title: '请输入公式内容' })
        return
      }
      const param = {
        formId: this.formId,
        sort: 0,
        name: this.name,
        cata: this.cata,
        triggerMode: this.triggerMode,
        content: content
      }

      this.$http.post('/zg-autoform/formula/add', param, () => {
        this.visible = false
        this.$emit('ok')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
